

class Enlarge{
    constructor(el){
        this.el=document.querySelector(el)
        // 获取图片盒子
        this.img=this.el.querySelector('.img')
        // 获取mask 这幕
        this.mask=this.el.querySelector('.mask')
        // 获取放大镜
        this.enlarge=this.el.querySelector('.enlarge')
        // 获取小图
        this.smallImg=this.el.querySelectorAll('ul li')
        this.init()

    }
    init(){
        // 调用鼠标移入移出
        this.overandOut()
        // 调用非行内样式
       //    this.getStyle()
        // 调用放大镜的宽高
        this.enlargeWH()  
        // 调用鼠标移动
        this.mousemove()
        // 调用小图
        this.smallImgChange()
        // 调用放大镜的范围
        // this.tbenlarge()
    }
    
}

// 获取非行内样式
Enlarge.prototype.getStyle=function(tagObj,cssAttr){
    //  return window.getComputedStyle ?window.getComputedStyle(tagObj)[cssAttr] : tagObj.currentStyle[cssAttr]
    if(window.getComputedStyle){
        return window.getComputedStyle(tagObj)[cssAttr]
    } else{
        tagObj.currentStyle[cssAttr]
    }
}

// 鼠标移入移出
Enlarge.prototype.overandOut=function(){
    // 1.给图片绑定鼠标移入事件
    this.img.onmouseover=()=>{
        // 鼠标移入,mask和放大镜显示
        this.mask.style.display=this.enlarge.style.display='block'
    }
    // 2.给图片绑定鼠标移出事件
    this.img.onmouseout=()=>{
        // 鼠标移出,mask和放大镜隐藏
        this.mask.style.display=this.enlarge.style.display='none'
    }
}

// 设置放大镜的宽高 (获取到之后才能算出比例)
Enlarge.prototype.enlargeWH=function(){
    // 放大镜宽高=mask遮幕宽高*(放大镜背景图宽高/mask遮幕背景图宽高)
    // enlargeW/H=maskW/h      enlargebgW/H       maskbgW/H   800/450=x/200
    // 1.获取遮幕宽高
    let maskW=parseInt(this.getStyle(this.mask,'width'))
    let maskH=parseInt(this.getStyle(this.mask,'height'))
    // console.log(maskW);  200
    // 2.获取放大镜背景图宽高
    //   先获取放大镜背景图大小
    let enlargebgSize=(this.getStyle(this.enlarge,'background-size')).split(' ')
    let enlargebgW=parseInt( enlargebgSize[0])
    let enlargebgH=parseInt( enlargebgSize[1])
    // console.log(enlargebgH);  800
    // 3.获取遮幕背景图宽高
    let maskbgW=parseInt(this.getStyle(this.img,'width'))
    let maskbgH=parseInt(this.getStyle(this.img,'height'))
    // console.log(maskbgH);  450

    // 4.获取到,放大镜的按照比例显示的宽高
     let enlargeW=maskW*(enlargebgW/maskbgW)
     let enlargeH=maskH*(enlargebgH/maskbgH)

    // 5. 设置放大镜的宽高(放到行内)
     this.enlarge.style.width=enlargeW+'px'
     this.enlarge.style.height=enlargeH+'px'
         

}

// 设置鼠标移动
Enlarge.prototype.mousemove=function(){
    // 1.给遮幕背景图img绑定鼠标移动事件
    this.img.onmousemove=(evt)=>{
        // 1.1获取事件对象
        let e=evt||window.event
        // 1.2设置鼠标移动距离
        //  img的Offset是到盒子box了.应该是到窗口的距离,所有直接用盒子的自身定位
        let leftObj=e.pageX-this.el.offsetLeft-this.mask.offsetWidth/2
        let topObj=e.pageY-this.el.offsetTop-this.mask.offsetHeight/2
        // 1.3限制范围
        if(leftObj<0) leftObj=0
        if(topObj<0) topObj=0
        
        let maxLeft=this.img.offsetWidth-this.mask.offsetWidth
        let maxTop=this.img.offsetHeight-this.mask.offsetHeight
        if(leftObj>maxLeft) leftObj=maxLeft
        if(topObj>maxTop) topObj=maxTop


        // 1.4同步遮幕的移动范围
        this.mask.style.left=leftObj+'px'
        this.mask.style.top=topObj+'px'

        // 1.5同步放大镜
        this.tbenlarge(leftObj,topObj)

    }
}

// 同步放大镜移动的范围
Enlarge.prototype.tbenlarge=function(leftObj,topObj){
    // 计算放大镜于遮幕的比例(放大镜样式是行内的)
    let maskW=this.mask.offsetWidth
    // console.log(maskW);
    let enlargeW=parseInt(this.enlarge.style.width)
    //  console.log(enlargeW);
    let pro=enlargeW/maskW
    this.enlarge.style.backgroundPosition=`-${leftObj*pro}px -${topObj*pro}px`

}


// 小图改变
Enlarge.prototype.smallImgChange=function(){
    // 1.遍历
    this.smallImg.forEach((item,i)=>{
        item.onclick=()=>{
            this.el.querySelector('ul li.active').className=''
            item.className='active'
            // 放大镜背景图换
            this.enlarge.style.background=`url(./imgs/${i+1}.big.jpg) no-repeat`
            // 遮幕背景图换
            this.img.style.background=`url(./imgs/${i+1}.jpg) no-repeat`
        }
    })     
}




// 二倍中,一开始及已经设置好了2倍的比例关系,在鼠标移动中,遮罩框是显示的,所有可以用OffSet语法
//等比中-网页一打开就要设置好遮罩框和放大镜的比例,但是这个时候遮幕没有显示,所有不能用offset语法.要获取非行内样式
export default Enlarge
